<template>
    <div class="wx-config">
        <m-example title="微信公众号配置">
            <ButtonGroup shape="circle" slot="header-right">
                <Button type="ghost" icon="ios-color-wand-outline"></Button>
                <Button type="ghost" icon="ios-sunny-outline"></Button>
                <Button type="ghost" icon="ios-crop"></Button>
                <Button type="ghost" icon="ios-color-filter-outline"></Button>
            </ButtonGroup>
            <div class="config-filed">
                <div class="config-filed-content">
                    <Form :model="config" :label-width="80" v-if="this.$route.query.type === 'add'">
                        <FormItem label="token">
                            <Input v-model="config.token" placeholder=""></Input>
                        </FormItem>
                        <FormItem label="appid">
                            <Input v-model="config.appid" placeholder=""></Input>
                        </FormItem>
                        <FormItem label="appsecret">
                            <Input v-model="config.appsecret" placeholder=""></Input>
                        </FormItem>
                        <FormItem>
                            <Button type="primary">添加</Button>
                        </FormItem>
                    </Form>
                    <div class="content-detail" v-if="this.$route.query.type === 'detail'">
                        <div class="detail-item" v-for="(value, key) in config" :key="key">
                            <div class="item-name">
                                <label>{{key.toUpperCase()}}</label>
                            </div>
                            <div class="item-text">
                                <p>{{value}}</p>
                            </div>
                            <div class="item-edit">
                                <Icon type="edit" @click.native="goto('/wx/config/edit?type=' + key)"></Icon>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="config-filed-help">
                    <Divider title="温馨提示"></Divider>
                </div>
            </div>
        </m-example>
    </div>
</template>

<script>
    export default {
        data () {
            return {
                config: {
                    token: '',
                    appid: '',
                    appsecret: ''
                }
            }
        },
        methods: {
            getWxConfig () {
                const self = this
                this.$http.wxConfig().then(res => {
                    if (res.success === true) {
                        self.config.token = res.data.token
                        self.config.appid = res.data.appid
                        self.config.appsecret = res.data.appsecret
                    }
                })
            }
        },
        created () {
            this.getWxConfig()
        }
    }
</script>

<style lang="less" scoped>
    @import '../../assets/less/Var.less';

    .config-filed {
        display: flex;
        .config-filed-content {
            flex-basis: 60%;
            flex-grow: 0;
            box-sizing: border-box;
            border-right: 1px dashed @border-color;
            padding-right: 20px;
            .content-detail {
                .detail-item {
                    display: flex;
                    border-bottom: 1px solid @border-color;
                    height: 40px;
                    align-items: center;
                    font-size: 14px;
                    transition: all 0.4s;
                    .item-name {
                        flex-basis: 15%;
                        text-align: right;
                        color:@title-color;
                        &::after {
                            content: '：';
                        }
                    }
                    .item-text {
                        flex: 1;
                        padding: 0px 10px;
                        color:@sub-color
                    }
                    .item-edit {
                        flex-basis: 10%;
                    }
                    &:hover{
                        border-color: @info-color;
                        cursor: pointer;
                    }
                }
            }
        }
        .config-filed-help {
            flex: 1;
            padding-left: 20px;
        }
    }
</style>